<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../css/state.css"/>
	</head>

	<body>
		<div class="mui-content">
			<div class="container page1">
			  <div class='home_title'>全家便利店（七夕广场店）</div>
			   <div class='state_img'>
			   	<img id="img1" src="../img/on.jpg" alt="" />
			   	<img id="img2" src="../img/off.jpg" alt="" /> 	
			   </div> 
			  <div class='state_choice'>
			    <div class="on active">
			      <div>
			      	<span></span>
			      </div>
			      <text>营业中</text> 
			    </div>
			    <div class="off">
			      <div>
			      	<span></span>
			      </div>
			      <text>打烊</text> 
			    </div>
			  </div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			mui('body').on('tap', '.state_choice >div', function() {
				mui(".state_choice >div").each(function(){ 
                        this.classList.remove('active'); 
                   }); 
				this.classList.add('active');
				var img1 =document.getElementById('img1');				console.log(img1)
				var img2 =document.getElementById('img2')
				if(this.classList.contains('on')){
					img1.style.display = "block";
					img2.style.display = "none";					
				}else{
					img2.style.display = "block";
					img1.style.display = "none";
				}
			})
		</script>
	</body>
</html>